<template>
  <a-modal
    v-model:visible="visible"
    title="新增账号"
    :maskClosable="false"
    @ok="handleOk"
    :style="{
      top: '0px',
      width: winWidth + 'px',
      height: winHeight + 'px',
    }"
  >
    <a-card
      :body-style="{ padding: '24px 32px' }"
      :bordered="false"
      :style="{
        top: '0px',
        width: '100%',
        height: winHeight + 'px',
        overflow: 'hidden',
        overflowY: 'scroll',
      }"
    >
      <a-form
        ref="formRef"
        name="basic"
        :label-col="{ span: 1 }"
        :wrapper-col="{ span: 18 }"
        autocomplete="off"
      >
        <a-form-item label="账号">
          <a-input v-model:value="formValue.userName" />
          <label class="remark">只能填写英文字母或数字</label>
        </a-form-item>
        <a-form-item label="昵称">
          <a-input v-model:value="formValue.nickName" />
        </a-form-item>
        <a-form-item label="姓名">
          <a-input v-model:value="formValue.realName" />
        </a-form-item>
        <a-form-item label="电话">
          <a-input v-model:value="formValue.phone" />
        </a-form-item>
        <a-form-item label="密码">
          <a-input v-model:value="formValue.password" />
        </a-form-item>
        <a-form-item label="性别">
          <SexSelector id="addSexSelector" ref="sexSelector" :version="now" />
        </a-form-item>
        <a-form-item label="部门">
          <DeptSelector
            id="addDeptSelector"
            ref="deptSelector"
            :version="now"
          />
        </a-form-item>
        <a-form-item label="角色">
          <RoleSelector
            id="addRoleSelector"
            ref="roleSelector"
            :version="now"
          />
        </a-form-item>

        <a-form-item label="状态">
          <a-select
            ref="select"
            v-model:value="formValue.status"
            style="width: 120px"
            @change="handleStatusChange"
          >
            <a-select-option
              v-for="item in statusOpts"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model:value="formValue.remark" />
        </a-form-item>
      </a-form>
    </a-card>
    <template #footer>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk"
        >提交</a-button
      >
      <a-button key="back" @click="handleCancel">返回</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineEmits,
} from "vue";
import { FormValue, submit, statusOptions } from "./index";
import ResultEnum from "@/config/ResultEnum";
import { message } from "ant-design-vue";
import { copyObjVal, timestamp } from "@/utils/common";
import { PlusOutlined } from "@ant-design/icons-vue";
import SexSelector from "@/components/sexSelector/index.vue";
import DeptSelector from "@/components/deptSelector/index.vue";
import RoleSelector from "@/components/roleSelector/index.vue";
import { Md5 } from "ts-md5/dist/md5";

export default defineComponent({
  components: {
    PlusOutlined,
    SexSelector,
    DeptSelector,
    RoleSelector,
  },
  setup(props, context) {
    const emit = defineEmits(["refreshTable"]);
    const sexSelector = ref();
    const deptSelector = ref();
    const roleSelector = ref();

    const now = ref();

    const formRef = ref();
    const visible = ref(false);
    const loading = ref(false);
    const winWidth = ref(document.body.clientWidth);
    const winHeight = ref(document.body.clientHeight - 200);

    const statusOpts = ref(statusOptions);

    const groupKeyOpts = ref([]);

    const defaultValues = () => {
      return {
        userName: "wang1688",
        nickName: "王六八",
        realName: "王柳",
        deptId: "",
        roleId: "",
        email: "",
        phone: "13560912417",
        sex: "Man",
        avatar: "",
        status: "Normal",
        remark: "",
        password: "123456" as string,
      };
    };

    const formValue = reactive<FormValue>(defaultValues());

    const initData = () => {
      let defaultVals = defaultValues();
      copyObjVal(defaultVals, formValue);
    };

    const display = () => {
      now.value = timestamp();
      visible.value = true;
      initData();
    };

    //确定按钮点击事件
    const handleOk = () => {
      validateParams()
        .then((res) => {
          loading.value = true;
          let postData = {
            userName: formValue.userName,
            nickName: formValue.nickName,
            realName: formValue.realName,

            sex:
              sexSelector.value.getData() == undefined
                ? null
                : sexSelector.value.getData(),
            deptId:
              deptSelector.value.getData() == null
                ? null
                : deptSelector.value.getData().id,
            roleId:
              roleSelector.value.getData() == null
                ? null
                : roleSelector.value.getData().roleId,
            email: formValue.email,
            phone: formValue.phone,
            status: formValue.status,
            remark: formValue.remark,
            password: Md5.hashStr(formValue.password),
          };
          submit(postData)
            .then((res: any) => {
              loading.value = false;
              message.success("提交成功");
              visible.value = false;
              context.emit("refreshTable");
            })
            .catch((res: any) => {
              loading.value = false;
              message.error(res);
            });
        })
        .catch((res: string) => {
          message.error(res);
        });
    };

    //校验数据
    const validateParams = () => {
      return new Promise((resolve: any, reject: any) => {
        if (!formValue.userName) {
          reject("请填写账号");
        }
        if (!formValue.realName) {
          reject("请填写姓名");
        }
        if (!formValue.phone) {
          reject("请填写电话");
        }
        if (!formValue.status) {
          reject("请选择状态");
        }
        resolve("ok");
      });
    };

    const handleCancel = () => {
      //formValue.content = "";
      console.log(defaultValues);
      visible.value = false;
    };

    onMounted(() => {
      window.onresize = () => {
        winWidth.value = document.body.clientWidth / 2;
        winHeight.value = document.body.clientHeight - 200;
      };
    });

    const handleStatusChange = (value: any) => {
      console.log(value);
    };

    onBeforeUnmount(() => {});

    //返回数据
    return {
      visible,
      display,
      handleOk,
      handleCancel,
      loading,
      formValue,
      winWidth,
      winHeight,
      handleStatusChange,
      statusOpts,
      groupKeyOpts,
      PlusOutlined,
      sexSelector,
      deptSelector,
      roleSelector,
      now,
    };
  },
});
</script>
